<template>
    <div class="MyWelcome">
        <!-- 导航栏 -->
        <NavBar></NavBar>

        <!-- 网页主体部分 -->
        <el-main style="padding: 0px">
            <router-view></router-view>
        </el-main>

        <!-- 注脚信息 -->  <!-- 在：about 路由时不显示注脚 -->
        <Footer v-show="this.$store.state.pageName!=='about'"></Footer>
    </div>
</template>

<script>
    import NavBar from "../components/layout/NavBar";
    import Footer from "../components/layout/Footer";
    import {mapState} from 'vuex'
    export default {
        name: "Welcome",
        components:{NavBar,Footer},
        data() {
            return {
                scrollTop: 0,
                opacity: 0,
                timer: null,
                speed: 0.2,
                backTopFlag: false
            }
        },
        watch: {
            /* 监控 scrollTop 属性，适时地出现‘返回顶部’ 的按钮 */
            'scrollTop': {
                handler(value) {
                    if (value > 100 && this.backTopFlag === false) {
                        this.backTopFlag = true
                    } else if (value <= 100 && this.backTopFlag === true){
                        this.backTopFlag = false
                    }
                }
            }
        },
        computed:{
            ...mapState([
                'pageName'
            ]),
        },
        mounted() {
            window.addEventListener('scroll', this.getScroll);
        },
        destroyed() {
            window.removeEventListener('scroll', this.getScroll);
        },
        methods: {
            // 每次屏幕滚动时为scrollTop赋新值
            getScroll() {
                this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            },
            // 实现平滑滚动到固定位置
            scollTo(offset) {
                window.scrollTo({top: offset, behavior: 'smooth'})
            },
        }
    }





</script>

<style scoped lang="less">
    .MyWelcome{
        background-image: url("https://cyh11820.oss-cn-hangzhou.aliyuncs.com/noteimgs/noteimgs-master/img/202206131647254.jpg");
        background-repeat: repeat;
        background-size: 100%;
        background-attachment: fixed;   /* 背景图片不随页面滚动 */
    }
    @media screen and (max-width: 768px) {
        .MyWelcome {
            background-color: black;
            background-image: url("https://cyh11820.oss-cn-hangzhou.aliyuncs.com/noteimgs/noteimgs-master/img/202206131650964.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed; /* 背景图片不随页面滚动 */
            background-position-y: 71px;
        }
    }
    /*滑到顶部*/
    #back-top span {
        cursor: pointer;
        height: 50px;
        margin: -125px 0 0;
        overflow: hidden;
        padding: 0;
        position: fixed;
        right: 50px;
        bottom: 50px;
        width: 50px;
        z-index: 11;
        background-color: white;
        box-shadow: 0 2px 4px rgba(0,0,0,.16);
        border-radius: 50%;
        display: flex;
        opacity: 0.8;
        justify-content: center;
        align-items: center;
        /*background: url('../assets/about/rocket.png') no-repeat;*/
    }
    #back-top:hover span{
        opacity: 1;
    }
    .el-icon-arrow-up{
        color: #ccc;
        font-size: 40px;
    }

    .fade-enter{
        opacity: 0;
    }
    .fade-enter-active{
        transition: opacity 1s;
    }

    .fade-leave-to{
        opacity: 0;
    }
    .fade-leave-active{
        transition: opacity 1s;
    }

</style>





